<template >
  <div class="app-container">
    <div class="status-point" style=" background-color:#67C23A; position: absolute; left: 71%; top:0.9%;"  ></div>
    <div style="position: absolute; left: 73%;top: 0.9%">拟合线</div>
    <div class="status-point" style=" background-color:red; position: absolute; left: 79%; top:0.9%;"  ></div>
    <div style="position: absolute; left: 81%;top: 0.9%">异常点</div>
    <div class="status-point" style=" background-color:cornflowerblue; position: absolute; left: 87%; top:0.9%;"  ></div>
    <div style="position: absolute; left: 89%;top: 0.9%">正常点</div>
    <div class="search-bar">
      <el-form :model="searchForm" inline size="mini">
        <el-form-item label="作业区">
          <el-select
            v-model="searchForm.ledger_area"
            clearable
            filterable
            placeholder="请选择作业区"
          >
            <el-option
              v-for="item in site"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="井号">
          <el-input
            v-model="searchForm.ledger_well_name"
            clearable
            placeholder="请输入井号"
          />
        </el-form-item>

        <el-form-item label="状态">
          <el-select
            v-model="searchForm.alarm_class"
            placeholder="请选择报警状态"
            clearable
          >
            <el-option label="一级报警" value="1" />
            <el-option label="二级报警" value="2" />
            <el-option label="未报警" value="0" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            size="mini"
            @click="getListPage"
          >查询</el-button>
          <el-button type="default" size="mini" @click="reset">清空</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div id="chartBlock"   v-if="this.dataflag === true" >
    <div class="content"  style="width: 90%; font-size: 15px ;font-family: Arial"  ref="cont" >
      <div :class="'col'+index" :id="colid+index" v-for="(item,index) in this.redis_Data" :key="index"  ref="col">
        <div style="float: left; padding: 0 0 0 10px;">井号:{{item.wellName }}</div>
        <div style="float: left;padding: 0 0 0 10px;">作业区:{{item.data_orgId }}</div>
      </div>
      <div id="alarmBlock"  v-if="this.alarmFlag===true" >
        <div  :class="'alrm'+index"  :id="alarmid+index" v-for="(item,index) in tableData"  :key="index">
        <div  v-if="item.alarm_class == 0">
          <div>   报警类别：未报警</div>
        </div>
        <div  v-else-if="item.alarm_class== 1">
          <div>报警类别：一级报警</div>
        </div>
        <div  v-else-if="item.alarm_class == 2">
          <div>报警类别：二级报警</div>
        </div>
      </div>
      </div>
      <div   class="showModel"  v-for="(item,index) in redis_Data" :key="index ">
        <div v-if="item ===null || item.x=== null || item.x === 0 "   :class="'nodata' + index" style="width: 400px; height:300px; display:block">
        <img src="../../../public/nodata.png" style="width:90%; height:65%;  margin: 11% 0 0 20% ; opacity: 0.7; border-radius: 15px">
      </div>
      <div   v-else :class="'style'+index"  ref="chart">
      <scatter-chart  :redis_Data ="item" :scat_id="item.wellName" ></scatter-chart>
      </div>
      </div>
    </div>
    </div>
    <div id="page"  style="position: relative" >
      <Pagecheck
        ref="turnPage"
      :page="page"
      :limit="limit"
      :total="total"
      @changePage="getListPage1(arguments)"
    />
      <div class="jumpstyle">
      到 <input class="int01" type="text"  v-model="jumpPage"> 页<el-button style="margin: 0 0 0 5px" type="primary" size="mini" @click="test(jumpPage)">跳转</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import Pagination from '@/components/pagination.vue'
import Pagecheck from '@/components/Pagecheck'
import scatterChart from './components/scatterChart'
export default {
  name: 'Querycheck',
  components: {
    Pagination,
    scatterChart,
    Pagecheck
    // CheckCharts
  },
  data() {
    return {
      jumpPage: ' ',
      contid: '',
      chartid: '',
      colid: '',
      alarmid: '',
      site: [
        {
          value: '第一采油作业区',
          label: '第一采油作业区'
        },
        {
          value: '第二采油作业区',
          label: '第二采油作业区'
        },
        {
          value: '第三采油作业区',
          label: '第三采油作业区'
        },
        {
          value: '第五采油作业区',
          label: '第五采油作业区'
        },
        {
          value: '第七采油作业区',
          label: '第七采油作业区'
        },
        {
          value: '第八采油作业区',
          label: '第八采油作业区'
        },
        {
          value: '第九采油作业区',
          label: '第九采油作业区'
        },
        {
          value: '运行维护一中心',
          label: '运行维护一中心'
        }
      ],
      value01: '',
      searchForm: {
        ledger_well_name: '',
        ledger_area: '',
        alarm_class: ''
      },
      tableData: {},
      alarmFlag: false,
      tableConfig: [],
      loading: false,
      showCharts: false,
      wellId: '',
      page: 1,
      limit: 48,
      total: 0,
      redis_Data: {},
      IsEmpty: [],
      dataflag: false
    }
  },
  mounted() {
    this.getListPage()
  },

  methods: {
    /* eslint-disable*/
    getListPage() {
      this.redis_Data = {}
      this.dataflag = false
      this.alarmFlag = false
      let pageNum = this.page
      let pageSize = this.limit
      let data = this.searchForm
      this.$http
        .post('/wellNameResultModel/pageQuery', {
          pageNum,
          pageSize,
          data
        }).then(res => {
        console.log(res.data.code, 'code')
        if (res.data.data.records.length === 0){
          window.alert('暂无记录')
          location.reload()
        }
        else{
          let l = res.data.data.records.length
          for (var r=0; r<l; r++){
            this.IsEmpty[r] = false
          }
          this.tableData = res.data.data.records
          console.log('tableData', this.tableData)
          for (var i=0; i<l;i++){
            let objredis = eval("(" + this.tableData[i].redis_Data + ")")
            let Jsonredis = JSON.parse(objredis)
            this.redis_Data[i] = Jsonredis
            console.log(this.redis_Data[i], '0')
            if(this.redis_Data[i] === null || this.redis_Data[i].x === 0)
            {
              this.IsEmpty[i] = true
            }
          }
          for (var j=0; j<l;j++){
            console.log(this.IsEmpty[j],'IsEmpty')
          }

          this.dataflag = true
          this.alarmFlag =true
          this.total = res.data.data.total
          const block = document.getElementById('chartBlock')
          console.log(block,'div')
        }

      }).catch(err => {
        this.$message.error(err)
      })
    },
    getListPage1(msg) {
      this.redis_Data = {}
      // this.dataflag = false
      this.alarmFlag = false
      console.log(msg, 'msg')
      let pageNum = msg[0]
      let pageSize = msg[1]
      this.limit = msg[1]
      let data = this.searchForm
      this.$http
        .post('/wellNameResultModel/pageQuery', {
          pageNum,
          pageSize,
          data
        }).then(res => {
        let l = res.data.data.records.length
        this.tableData = res.data.data.records
        console.log('tableData', this.tableData)
        for (var i=0; i<l;i++){
          let objredis = eval("(" + this.tableData[i].redis_Data + ")")
          let Jsonredis = JSON.parse(objredis)
          this.redis_Data[i] = Jsonredis
          console.log(this.redis_Data[i], '0')
          if(this.redis_Data[i] === null || this.redis_Data[i].x === 0)
          {
            this.IsEmpty[i] = true
          }
        }
        this.dataflag = true
        this.alarmFlag = true
        this.total = res.data.data.total
        const block = document.getElementById('chartBlock')
        console.log(block,'div')
      }).catch(err => {
        this.$message.error(err)
      })
    },
    test(event){
      console.log('首先我被执行了')
      if(event != this.page && event != ""){
        console.log('event',event)
        window.scrollTo({
        top: 0,
        behavior: 'smooth'
      }); //页面滚动到顶部
        this.page = event
        var a  = []
        a.push(this.page)
        a.push(48)
        console.log(a,'翻页可以不')
        this.getListPage1(a); //获取列表数据
        this.$refs.turnPage.page = this.page
        this.jumpPage = ''

      }else{
        console.log('又有问题里')
      }
    },
    reset() {
      this.searchForm = {}
      this.getListPage()
    },

  }
}
</script>

<style scoped>

.jumpstyle{
  position: absolute;left:60%; top:30%;
  width: 300PX;
}
.int01{
  width: 100px;
  padding: 0 10px 0 10px;
}

.nodata0{
  position: absolute;left:3%; top:2.2%;
}
.nodata1{
  position: absolute;left: 33%; top:2.2%;

}
.nodata2{
  position: absolute; left: 63%; top: 2.2%;
}
.nodata3{
  position: absolute;left: 3%; top:8.2%
}
.nodata4{
  position: absolute;left: 33%; top:8.2%
}
.nodata5{
  position: absolute;left: 63%; top:8.2%
}
.nodata6{
  position: absolute;left: 3%; top:14.2%
}
.nodata7{
  position: absolute;left: 33%; top:14.2%
}
.nodata8{
  position: absolute;left: 63%; top:14.2%
}
.nodata9{
  position: absolute;left: 3%; top:20.2%
}
.nodata10{
  position: absolute;left: 33%; top:20.2%
}
.nodata11{
  position: absolute;left: 63%; top:20.2%
}
.nodata12{
  position: absolute;left: 3%; top:26.2%;
}
.nodata13{
  position: absolute;left: 33%; top:26.2%;
}
.nodata14{
  position: absolute;left: 63%; top:26.2%;
}
.nodata15{
  position: absolute;left: 3%; top:32.2%;
}
.nodata16{
  position: absolute;left: 33%; top:32.2%;
}
.nodata17{
  position: absolute;left: 63%; top:32.2%;
}
.nodata18{
  position: absolute;left: 3%; top:38.2%;
}
.nodata19{
  position: absolute;left: 33%; top:38.2%;
}
.nodata20{
  position: absolute;left: 63%; top:38.2%;
}
.nodata21{
  position: absolute;left: 3%; top:44.2%;
}
.nodata22{
  position: absolute;left: 33%; top:44.2%;
}
.nodata23{
  position: absolute;left: 63%; top:44.2%;
}
.nodata24{
  position: absolute;left: 3%; top:50.2%;
}
.nodata25{
  position: absolute;left: 33%; top:50.2%;
}
.nodata26{
  position: absolute;left: 63%; top:50.2%;
}
.nodata27{
  position: absolute;left: 3%; top:56.2%;
}
.nodata28{
  position: absolute;left: 33%; top:56.2%;
}
.nodata29{
  position: absolute;left: 63%; top:56.2%;
}
.nodata30{
  position: absolute;left: 3%; top:62.2%;
}
.nodata31{
  position: absolute;left: 33%; top:62.2%;
}
.nodata32{
  position: absolute;left: 63%; top:62.2%;
}
.nodata33{
  position: absolute;left: 3%; top:68.2%;
}
.nodata34{
  position: absolute;left: 33%; top:68.2%;
}
.nodata35{
  position: absolute;left: 63%; top:68.2%;
}
.nodata36{
  position: absolute;left: 3%; top:74.2%;
}
.nodata37{
  position: absolute;left: 33%; top:74.2%;
}
.nodata38{
  position: absolute;left: 63%; top:74.2%;
}
.nodata39{
  position: absolute;left: 3%; top:80.2%;
}
.nodata40{
  position: absolute;left: 33%; top:80.2%;
}
.nodata41{
  position: absolute;left: 63%; top:80.2%;
}
.nodata42{
  position: absolute;left:3%; top:86.2%;
}
.nodata43{
  position: absolute;left: 33%; top:86.2%;
}
.nodata44{
  position: absolute;left: 63%; top:86.2%;
}
.nodata45{
  position: absolute;left: 3%; top:92.2%;
}
.nodata46{
  position: absolute;left: 33%; top:92.2%;
}
.nodata47{
  position: absolute;left: 63%; top:92.2%;
}
.style0{
  position: absolute;left: 7%; top:2%;

}
.style1{
  position: absolute;left: 37%; top:2%;

}
.style2{
  position: absolute; left: 67%; top: 2%;
}
.style3{
  position: absolute;left: 7%; top:8%
}
.style4{
  position: absolute;left: 37%; top:8%
}
.style5{
  position: absolute;left: 67%; top:8%
}
.style6{
  position: absolute;left: 7%; top: 14%
}
.style7{
  position: absolute;left: 37%; top:14%
}
.style8{
  position: absolute;left: 67%; top:14%
}
.style9{
  position: absolute;left: 7%; top: 20%
}
.style10{
  position: absolute;left: 37%; top: 20%
}
.style11{
  position: absolute;left: 67%; top: 20%
}
.style12{
  position: absolute;left: 7%; top:26%;
}
.style13{
  position: absolute;left: 37%; top:26%;
}
.style14{
  position: absolute;left: 67%; top:26%;
}
.style15{
  position: absolute;left: 7%; top:32%;
}
.style16{
  position: absolute;left: 37%; top: 32%;
}
.style17{
  position: absolute;left: 67%; top:32%;
}
.style18{
  position: absolute;left: 7%; top:38%;
}
.style19{
  position: absolute;left: 37%; top:38%;
}
.style20{
  position: absolute;left: 67%; top:38%;
}
.style21{
  position: absolute;left: 7%; top:44%;
}
.style22{
  position: absolute;left: 37%; top:44%;
}
.style23{
  position: absolute;left: 67%; top:44%;
}
.style24{
  position: absolute;left: 7%; top:50%;
}
.style25{
  position: absolute;left: 37%; top:50%;
}
.style26{
  position: absolute;left: 67%; top:50%;
}
.style27{
  position: absolute;left: 7%; top: 56%;
}
.style28{
  position: absolute;left: 37%; top:56%;
}
.style29{
  position: absolute;left: 67%; top:56%;
}
.style30{
  position: absolute;left: 7%; top:62%;
}
.style31{
  position: absolute;left: 37%; top:62%;
}
.style32{
  position: absolute;left: 67%; top:62%;
}
.style33{
  position: absolute;left: 7%; top:68%;
}
.style34{
  position: absolute;left: 37%; top:68%;
}
.style35{
  position: absolute;left: 67%; top:68%;
}
.style36{
  position: absolute;left: 7%; top:74%;
}
.style37{
  position: absolute;left: 37%; top:74%;
}
.style38{
  position: absolute;left: 67%; top:74%;
}
.style39{
  position: absolute;left: 7%; top:80%;
}
.style40{
  position: absolute;left: 37%; top:80%;
}
.style41{
  position: absolute;left: 67%; top:80%;
}
.style42{
  position: absolute;left:7%; top:86%;
}
.style43{
  position: absolute;left: 37%; top:86%;
}
.style44{
  position: absolute;left: 67%; top:86%;
}
.style45{
  position: absolute;left: 7%; top:92%;
}
.style46{
  position: absolute;left: 37%; top:92%;
}
.style47{
  position: absolute;left: 67%; top:92%;
}
.col0{
  position: absolute;left: 11%; top:2%;

}
.col1{
  position: absolute;left: 41%; top:2%;

}
.col2{
  position: absolute; left: 71%; top: 2%;
}
.col3{
  position: absolute;left: 11%; top:8%
}
.col4{
  position: absolute;left: 41%; top:8%
}
.col5{
  position: absolute;left: 71%; top:8%
}
.col6{
  position: absolute;left:11%; top: 14%
}
.col7{
  position: absolute;left: 41%; top:14%
}
.col8{
  position: absolute;left: 71%; top:14%
}
.col9{
  position: absolute;left: 11%; top: 20%
}
.col10{
  position: absolute;left: 41%; top: 20%
}
.col11{
  position: absolute;left: 71%; top: 20%
}
.col12{
  position: absolute;left: 11%; top:26%;
}
.col13{
  position: absolute;left: 41%; top:26%;
}
.col14{
  position: absolute;left: 71%; top:26%;
}
.col15{
  position: absolute;left: 11%; top:32%;
}
.col16{
  position: absolute;left: 41%; top: 32%;
}
.col17{
  position: absolute;left: 71%; top:32%;
}
.col18{
  position: absolute;left: 11%; top:38%;
}
.col19{
  position: absolute;left: 41%; top:38%;
}
.col20{
  position: absolute;left: 71%; top:38%;
}
.col21{
  position: absolute;left: 11%; top:44%;
}
.col22{
  position: absolute;left: 41%; top:44%;
}
.col23{
  position: absolute;left: 71%; top:44%;
}
.col24{
  position: absolute;left: 11%; top:50%;
}
.col25{
  position: absolute;left: 41%; top:50%;
}
.col26{
  position: absolute;left: 71%; top:50%;
}
.col27{
  position: absolute;left: 11%; top: 56%;
}
.col28{
  position: absolute;left: 41%; top:56%;
}
.col29{
  position: absolute;left: 71%; top:56%;
}
.col30{
  position: absolute;left: 11%; top:62%;
}
.col31{
  position: absolute;left: 41%; top:62%;
}
.col32{
  position: absolute;left: 71%; top:62%;
}
.col33{
  position: absolute;left:11%; top:68%;
}
.col34{
  position: absolute;left: 41%; top:68%;
}
.col35{
  position: absolute;left: 71%; top:68%;
}
.col36{
  position: absolute;left: 11%; top:74%;
}
.col37{
  position: absolute;left: 41%; top:74%;
}
.col38{
  position: absolute;left: 71%; top:74%;
}
.col39{
  position: absolute;left: 11%; top:80%;
}
.col40{
  position: absolute;left: 41%; top:80%;
}
.col41{
  position: absolute;left: 71%; top:80%;
}
.col42{
  position: absolute;left: 11%; top:86%;
}
.col43{
  position: absolute;left: 41%; top:86%;
}
.col44{
  position: absolute;left: 71%; top:86%;
}
.col45{
  position: absolute;left: 11%; top:92%;
}
.col46{
  position: absolute;left: 41%; top:92%;
}
.col47{
  position: absolute;left: 71%; top:92%;
}



.alrm0{
  position: absolute;left: 15%; top:2.5%;

}
.alrm1{
  position: absolute;left: 45%; top:2.5%;

}
.alrm2{
  position: absolute; left: 75%; top: 2.5%;
}
.alrm3{
  position: absolute;left: 15%; top:8.5%
}
.alrm4{
  position: absolute;left: 45%; top:8.5%
}
.alrm5{
  position: absolute;left: 75%; top:8.5%
}
.alrm6{
  position: absolute;left:15%; top: 14.5%
}
.alrm7{
  position: absolute;left: 45%; top:14.5%
}
.alrm8{
  position: absolute;left: 75%; top:14.5%
}
.alrm9{
  position: absolute;left: 15%; top: 20.5%
}
.alrm10{
  position: absolute;left: 45%; top: 20.5%
}
.alrm11{
  position: absolute;left: 75%; top: 20.5%
}
.alrm12{
  position: absolute;left: 15%; top:26.5%;
}
.alrm13{
  position: absolute;left: 45%; top:26.5%;
}
.alrm14{
  position: absolute;left: 75%; top:26.5%;
}
.alrm15{
  position: absolute;left: 15%; top:32.5%;
}
.alrm16{
  position: absolute;left: 45%; top: 32.5%;
}
.alrm17{
  position: absolute;left: 75%; top:32.5%;
}
.alrm18{
  position: absolute;left: 15%; top:38.5%;
}
.alrm19{
  position: absolute;left: 45%; top:38.5%;
}
.alrm20{
  position: absolute;left: 75%; top:38.5%;
}
.alrm21{
  position: absolute;left: 15%; top:44.5%;
}
.alrm22{
  position: absolute;left: 45%; top:44.5%;
}
.alrm23{
  position: absolute;left: 75%; top:44.5%;
}
.alrm24{
  position: absolute;left: 15%; top:50.5%;
}
.alrm25{
  position: absolute;left: 45%; top:50.5%;
}
.alrm26{
  position: absolute;left: 75%; top:50.5%;
}
.alrm27{
  position: absolute;left: 15%; top: 56.5%;
}
.alrm28{
  position: absolute;left: 45%; top:56.5%;
}
.alrm29{
  position: absolute;left: 75%; top:56.5%;
}
.alrm30{
  position: absolute;left: 15%; top:62.5%;
}
.alrm31{
  position: absolute;left: 45%; top:62.5%;
}
.alrm32{
  position: absolute;left: 75%; top:62.5%;
}
.alrm33{
  position: absolute;left:15%; top:68.5%;
}
.alrm34{
  position: absolute;left: 45%; top:68.5%;
}
.alrm35{
  position: absolute;left: 75%; top:68.5%;
}
.alrm36{
  position: absolute;left: 15%; top:74.5%;
}
.alrm37{
  position: absolute;left: 45%; top:74.5%;
}
.alrm38{
  position: absolute;left: 75%; top:74.5%;
}
.alrm39{
  position: absolute;left: 15%; top:80.5%;
}
.alrm40{
  position: absolute;left: 45%; top:80.5%;
}
.alrm41{
  position: absolute;left: 75%; top:80.5%;
}
.alrm42{
  position: absolute;left: 15%; top:86.5%;
}
.alrm43{
  position: absolute;left: 45%; top:86.5%;
}
.alrm44{
  position: absolute;left: 75%; top:86.5%;
}
.alrm45{
  position: absolute;left: 15%; top:92.5%;
}
.alrm46{
  position: absolute;left: 45%; top:92.5%;
}
.alrm47{
  position: absolute;left: 75%; top:92.5%;
}
#page{
  position: absolute;left: 3%;top:96%;
  width: 80%;
}
.app-container{
  height: 5300px;
}
#chartBlock{
  overflow-y: scroll;
}
.status-point {display: inline-block;width: 10px;height: 10px;border-radius: 50%;font-size: 15px;font-family:sans-serif; }
</style>
